import Header from "@/shared/header";
import Icon from "@/components/icon";
import dayjs from "dayjs";
import styles from "./index.module.scss";
import React, { useCallback, useEffect, useState } from "react";
import { useDispatch } from "react-redux";
import ReplyItem from "@/pages/Article/components/replyItem";
import { Empty, Popup, NavBar, TextArea, Button } from "antd-mobile";
import { FillinOutline } from "antd-mobile-icons";
import {
  ArticleComment,
  ArtComment,
  ArticleCommentResponse,
} from "@/types/data";
import { http } from "@/utils/http";

interface Props {
  // 当前要回复的评论内容
  comment: ArtComment;
  // 当前要回复的评论的对象
}

export default function ReplyList({ comment }: Props) {
  const dispatch = useDispatch();
  // 用于获取评论回复列表的方法
  // 评论项的回复列表状态
  const [commentReply, setCommentReply] = useState({} as ArticleComment);
  const [visible1, setVisible1] = useState(false);
  const [TextAreavalue, setTextAreavalue] = useState("");
  const loadDdata = async () => {
    const res = await http.get<ArticleCommentResponse>("/comments", {
      params: {
        type: "c",
        source: comment.com_id,
      },
    });
    setCommentReply(res.data.data);
  };
  useEffect(() => {
    loadDdata();
  }, [comment.com_id]);

  // 评论回复列表数据的偏移量
  const [offset, setOffset] = useState<string | undefined>(undefined);
  // 是否还有更多数据可以加载
  const [hasMore, setHasMore] = useState(true);
  // 用于加载更多数据的方法
  /* const loadMore = () => {
    return requestComments({
      type: "c",
      source: comment.com_id,
      offset,
      limit: 10,
    })
      .unwrap()
      .then((response:any) => {
        // 评论回复列表获取成功
        // 保存评论回复列表
        // dispatch(saveReply(response.data.results));
        // 是否还有更多数据可以加载
        setHasMore(response.data.last_id !== response.data.end_id);
        // 更新获取数据的偏移量
        setOffset(response.data.last_id);
      });
  }; */

  // 重置评论回复列表
  const resetReplyComments = useCallback(() => {
    // dispatch(clearReply());
    setOffset(undefined);
    setHasMore(true);
  }, [dispatch]);

  // 回复评论的回调
  const onSubmit = async () => {
    let res = await http.post("/comments", {
      target: comment.com_id,
      content: TextAreavalue,
      art_id: localStorage.getItem("artId"),
    });
    loadDdata();
    setVisible1(false);
  };
  return (
    <>
      <Header title={`全部回复`} left={<Icon type={""} />} />
      <div className={styles.article}>
        <div className={styles.comment}>
          <div className={styles.item}>
            <div className={styles.commentator}>
              <div className={styles.avatar}>
                <img src={comment.aut_photo} alt="" />
                <span>{comment.aut_name}</span>
              </div>
              <button className={styles.attention}>关注</button>
            </div>
            <div className={styles.discuss}>{comment.content}</div>
            <div className={styles.bottom}>
              <div className={styles.reply}>
                {dayjs(comment.pubdate).format("YYYY-MM-DD")}
              </div>
              <div className={styles.like}>
                <span>{comment.is_liking}</span>
                <Icon
                  type={
                    comment.is_liking ? "iconbtn_like_sel" : "iconbtn_like2"
                  }
                />
              </div>
            </div>
          </div>
          <h4 className={styles.title}>全部回复({comment.reply_count})</h4>
          {commentReply.total_count > 0 ? (
            commentReply.results.map((item) => (
              <ReplyItem key={item.com_id} comment={item} loadDdata={loadDdata}/>
            ))
          ) : (
            <Empty description="暂无回复" />
          )}
          {/* <InfiniteScroll hasMore={hasMore} loadMore={loadMore} /> */}
        </div>
      </div>
      <div className={styles.bar}>
        {/* <ReplyComment
          id={comment.com_id}
          name={comment.aut_name}
          resetReplyComment={resetReplyComments}
        /> */}
        <div className={styles.bar}>
          <div className={styles.sofa} onClick={() => setVisible1(true)}>
            <FillinOutline className={styles.icon} />
            <span>写回复</span>
          </div>
          <div className={styles.icons}>
            <div className={styles.item}>
              <Icon type={"iconbtn_collect"} />
              <span>收藏</span>
            </div>
            <div className={styles.item}>
              <Icon type={"iconbtn_share"} />
              <span>分享</span>
            </div>
          </div>
        </div>
      </div>

      <Popup
        visible={visible1}
        onMaskClick={() => {
          setVisible1(false);
        }}
        onClose={() => {
          setVisible1(false);
        }}
        bodyStyle={{ height: "100vh" }}
      >
        <NavBar
          onBack={() => {
            setVisible1(false);
          }}
        >
          回复评论
        </NavBar>
        <TextArea
          placeholder="说点什么~"
          value={TextAreavalue}
          onChange={(val) => {
            setTextAreavalue(val);
          }}
        />
        <Button size="mini" color="primary" onClick={onSubmit}>
          发表
        </Button>
      </Popup>
    </>
  );
}
